<!DOCTYPE html>
<html>
<title>MUSIC.club</title>
<?php 
require './common/top.php'

 ?>

<meta name="viewport" content="width=device-width, initial-scale=1">


<body>


<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
}
.bgimg-1 {
    opacity: 0.7;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("./image/22.jpg");
    min-height: 100%;
}


 .bgimg_1, .bgimg_2, .bgimg_3, .bgimg_4, .bgimg_5, .bgimg_6{
                opacity: 0.7;
                   background-attachment: fixed;
                    background-position: center;
                    background-repeat: no-repeat;
                     background-size: cover;
                background-repeat: no-repeat;
    min-height: 600px;}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}


/* Turn off parallax scrolling for tablets and mobiles */


</style>

<body>

    

<div class="bgimg-1 w3-display-container">
  <div class="w3-display-middle">
    <span class="w3-xxlarge w3-text-light-grey w3-wide">MUSIC</span>
  </div>
</div>



                <?php
                       
                foreach($data['singers'] as $i=>$list){
           
                  echo'<br>';
                  ?>
                  <style>
                  .bgimg_<?php echo $i+1;?>{
                        
                        background-image: url("./upload/<?php echo $list['pic'];?>");

                  }
                  </style>

<div class="w3-display-container bgimg_<?php echo $i+1;?>" >
  <div class="w3-display-middle">
    <span class="w3-xxlarge w3-text-light-grey w3-wide"><?php echo $list['gname'];?></span>
  </div>
</div>    
<div class="w3-content w3-container w3-padding-64">

<?php             


                    echo "<h3 class='w3-center'>".$list['gname']."</h3>";
                    echo "<p class='w3-center'><em><br>".$list['intro']."</br></em></p>";

                    ?>

                 <div class="w3-row-padding w3-center">
                <table align="center" width="80%" border=0 class="table table-hover"  >
                <?php
                 foreach ($data['list'] as $row) {
             if ($row['gid']==$list['gid']) {    
                                    echo '<tr>';
                  echo'<td>'.$row['song'].'</td>';
                echo '<td><audio   src="upload/'.$row['url'].'" controls="controls"></td>';

               ?>



                <form action="index.php?c=comment&m=add" method="post" class="form-signin">
                <input type="hidden" name="sid" value="<?php echo $row['sid'];?>"  />
                <?php
$t=time()+28800;



?>

                <input type="hidden" name="cdate"  value="<?php echo date('Y-m-d H:i:s', $t);?>"/>
               <td>
                <input type="text" name="content" placeholder="留言" class="form-control" required/>
                      </td>
                      <td>
                <button class="btn text-muted text-center btn-danger " type="submit">提交</button>
                </td>
                </form>

                <?php
                  echo '</tr>';
                  }
          
                }
                ?>
                </table> 
                </div> 
     </div>
<?php
                }

?>

<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
  <p class="w3-medium">MADE BY NUTTER</p>
</footer> 
<!-- Add Google Maps -->
</body>
</html>